<template>
  <div>
    <detail-header :isTop="isTop"></detail-header>
    <div style="height:.71rem"></div>
    <detail-swiper :swiperImg="swiperImg"></detail-swiper>
    <div class="desc" style="background: #fff">
      <mt-cell class="border-bottom" :title="proData.name"></mt-cell>
      <div class="shangpin-price border-bottom">
        <span class="curprice">￥{{proData.price}}</span>
        <div class="div-float-right"></div>
      </div>
      <mt-cell class="border-bottom" :title="'地址：'+proData.area"></mt-cell>
      <div>
        <mt-cell class="border-bottom" title="详情"></mt-cell>
        <div style="padding: 0 .3rem 03rem">
          {{proData.introduce}}
        </div>
      </div>
    </div>
    <public-menu></public-menu>
    <div style="height:1.15rem"></div>
  </div>
</template>

<script>
import axios from 'axios'
import { Toast } from 'mint-ui'
import DetailHeader from './components/DetailHeader'
import DetailSwiper from './components/Swiper'
import PublicMenu from '../public/Menu'

export default {
  name: 'DetailHaowu',
  show: true,
  components: {
    DetailHeader,
    DetailSwiper,
    PublicMenu
  },
  data () {
    return {
      isTop: true,
      isDialog: 0,
      proData: {},
      selected: '1',
      act: '1',
      swiperImg: [],
      goods: {
        name: '',
        price: ''
      }
    }
  },
  methods: {
    getInfo () {
      axios.get('/meimai/interface/goodsUsed/detail', {
        params: { 'goodsId': this.$route.params.pid }
      }).then((res) => {
        res = res.data
        console.log(res)
        if (res.code === 0 && res.data) {
          this.proData = res.data
          this.swiperImg = res.data.imgArray
          this.goods.name = res.data.name
          this.goods.price = res.data.price
        }
      })
    },
    showDialog (data) {
      this.isDialog = data
    },
    handleScroll () {
      const top = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
      if (top > 620) {
        this.isTop = false
      } else {
        this.isTop = true
      }
    },
    handleCart (res) {
      if (!this.$store.state.userId) {
        alert('请登录！！')
        this.$router.push('/login')
        return false
      }
      if (res && this.$route.params.pid) {
        axios.get('/meimai/interface/cart/add', {
          params: { 'memberId': this.$store.state.userId, 'goodsId': this.$route.params.pid, 'quantity': res }
        }).then(() => {
          this.$router.push('/cart')
        })
      } else {
        this.isDialog = 0
        Toast('加入购物车错误')
      }
    },
    handleMall (res) {
      if (!this.$store.state.userId) {
        alert('请登录！！')
        this.$router.push('/login')
        return false
      }
      let tcartItemDOs = '?memberId=' + this.$store.state.userId + '&tCartItemDOs[0].id=' + this.$route.params.pid + '&tCartItemDOs[0].quantity=' + res
      sessionStorage.setItem('tcartItemDOs', tcartItemDOs)
      this.$router.push('/order')
    }
  },
  mounted () {
    this.getInfo()
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeDestroy () {
    window.removeEventListener('scroll', this.handleScroll)
  }
}
</script>

<style lang="stylus" scoped>
import '~styles/mixins.styl'
.goods >>> .mint-navbar
  border-bottom: 1px solid #eee
.goods >>> .mint-navbar .mint-tab-item.is-selected
  border-bottom: 3px solid #2a2a2a;
  color: #2a2a2a;
  margin-bottom: -3px;
.goods >>> .mint-tab-item
  color: #5f666b
.goods >>> .mint-tab-item-label
  font-size: 14px;
.goods-con
  padding-top: 2%
  width: 96% !important
  overflow: hidden
  margin: 0 auto
  position: relative
  display: block
.pinlun
  width: 100%
  margin: .3rem
  text-align: center
  border: 1px solid #eee
  th
    border: .02px solid #eee
    padding: .1rem
.shangpin-neirong
  padding: .15rem .2rem
  .shangpin-neirong-content
    font-size: .3rem
    color: #2a2a2a
    display: block
    line-height: .45rem
.shangpin-price
  padding: .15rem .2rem
  .curprice
    color: #ec2935
    font-size: .36rem;
    margin-left: -.06rem;
  .primeprice
    color: grey
    font-size: .26rem
    text-decoration: line-through
  #yishou
    float: right
    color: grey
    font-size: .26rem
  .curprice-small
    font-size: .24rem
    clear: both
    letter-spacing: .006rem
    line-height: .5rem
.shangpin-addinfo
  padding: 0 .2rem .1rem .2rem
  border-bottom: .2rem solid #eee
.shangpin-panel3
  background: white
  position: relative
  padding: 3%
  font-size: 0
  border-top: 1px solid #eee
  #url2
    display: inline-block
    vertical-align: middle
    width: 22%
    margin-left: 2%
    border: 1px solid #eee
  #name
    white-space: nowrap
    overflow: hidden
    text-overflow: ellipsis
    width: 60%
    display: inline-block
    vertical-align: middle
    font-size: .32rem
    margin-left: 3%
    margin-right: 1%
</style>
